<template>
	<view class="pg-content">
		<uni-popup ref="preview">
			<video v-show="isVideo(preItem.fileName)" class="pre-video" :src="getBackEffectUrl(preItem)" autoplay></video>
			<image v-show="!isVideo(preItem.fileName)" class="pre-video" :src="getBackEffectUrl(preItem)"></image>
		</uni-popup>
		<view class="pg-main">
			<view class="pg-scroll-main" v-show="current === 0">
				<view class="bf-for">
					<view v-for="(item, i) in effects" :key="i">
						<view class="bf-vimage" @click="switchChange(item)">
							<video v-if="false" :id="'id'+i" :src="getBackEffectUrl(item)" controls="false" object-fit="cover">
							</video>
							<image class="back-img" v-else :src="getBackEffectUrl(item)"></image>
							<view @click.stop="previewEffect(item)">预览</view>
							<image v-show="item.selectStatues" class="img-checked" src="/static/img/ok.png"></image>
						</view>
						<!-- <text>{{item.fileName}}</text> -->
					</view>
				</view>
			</view>
			<view v-show="current === 1">
				
			</view>
		</view>
		<button class="btn-bottom" @click="sumitChanged()">保存</button>
		<button class="add-bottom" @click="addBackeffect()">新增</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '背景特效',
				tabItems: ['全部'],
				current: 0,
				preItem: {},
				effects: []
			}
		},
		onShow() {
			uni.showLoading();
			this.getBackEffect();
		},
		methods: {
			getBackEffect() {
				uni.request({
				    url: '/api/getBackEffects',
				    success: (res) => {
						if (res.statusCode == 200) {
							this.effects = res.data;
							this.temps = {};
							res.data.forEach(item=> {
								this.temps[item.imageId] = item.selectStatues;
							});
						}
				    },
					complete: () => {
						uni.hideLoading();
					}
				});
			},
			isVideo(name) {
				if (name) {
					var i = name.lastIndexOf('.');
					return name.substring(i) == ".mp4";
				}
				return false;
			},
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
			},
			getBackEffectUrl(item) {
				var rid = this.isVideo(item.fileName) ? item.thumpId : item.imageId;
				return `${window.location.origin}/api/getBackEffect?rId=${rid}`;
			},
			previewEffect(e) {
				this.preItem = e;
				//this.$refs.preview.open();
				var rid = this.isVideo(e.fileName) ? e.imageId : e.thumpId;
				window.location.href = `${window.location.origin}/api/getBackEffect?rId=${rid}`;
			},
			switchChange(item){
				item.selectStatues = !item.selectStatues;
			},
			sumitChanged() {
				var hasChecked = false;
				this.effects.forEach(item=> {
					if (item.selectStatues) {
						hasChecked = true;
					}
				});
				if (!hasChecked) {
					uni.showToast({title: "请选择一个特效", icon:'none'});
				}
				if (hasChecked && this.temps) {
					uni.showModal({
						title: '保存',
						content: '是否保存设置',
						success: (res) => {
							if (res.confirm) {
								this.submitServer();
							}
						}
					});
				}
			},
			submitServer() {
				uni.showLoading();
				this.effects.forEach(async item=> {
					if (this.temps[item.imageId] != item.selectStatues) {
						await uni.request({
						    url: `/api/setBackEffect?name=${item.fileName}&checked=${item.selectStatues?1:0}`,
						    success: (res) => {
								var msg = res.statusCode == 200 ? "保存成功" : "保存失败";
								uni.showToast({title: msg, icon:'none'});
						    }
						});
					}
				});
				this.getBackEffect();
			},
			addBackeffect() {
				uni.navigateTo({
					url: '/pages/page/addbeffect'
				})
			}
		}
	}
</script>

<style>
	.bf-for {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 26rpx;
		padding: 26rpx;
	}
	.bf-for view{
		display: flex;
		align-items: center;
	}
	.bf-for text{
		flex: auto;
		margin-left: 8px;
	}
	.bf-vimage {
		position: relative;
	}
	.bf-vimage video,.back-img {
		width: 44vw;
		height: 230rpx;
		border: 1px solid #eee;
		border-radius: 10px;
		z-index: 0;
	}
	.img-checked {
		position: absolute;
		top: -10rpx;
		right: -10rpx;
		width: 66rpx;
		height: 66rpx;
	}
	/deep/ .uni-video-cover{
		display: none;
	}
	.bf-vimage view {
		display: none;
		background: #7F7F7F;
		position: absolute;
		bottom: 3px;
		right: 3px;
		padding: 5px 12px;
		font-size: 13px;
		color: #fafafa;
		border-radius: 8px 0px 8px 0px;
	}
	.pre-video {
		width: 100vw;
		height: 33vh;
	}
	.btn-bottom,.add-bottom {
		width: 100%;
		bottom: 0;
		background-color: #0055ff;
		border-radius: 0;
		color: #FFF;
	}
	.btn-bottom:active,.add-bottom:active {
		background-color: #0048da;
	}
</style>